<template>
	<div class="bg-gray-100 min-h-screen p-8">
		<div class="max-w-4xl mx-auto bg-white shadow-md rounded-lg">
			<!-- 选项卡导航 -->
			<div class="flex justify-center space-x-4 border-b border-gray-200">
				<div :class="{ 'bg-blue-500 text-white': activeTab === '1', 'bg-gray-200 text-gray-700': activeTab!== '1' }"
					@click="getList('1')"
					class="px-6 py-3 rounded-t cursor-pointer hover:bg-blue-400 transition-colors">
					获得荣誉
				</div>
				<div :class="{ 'bg-blue-500 text-white': activeTab === '2', 'bg-gray-200 text-gray-700': activeTab!== '2' }"
					@click="getList('2')"
					class="px-6 py-3 rounded-t cursor-pointer hover:bg-blue-400 transition-colors">
					颁发荣誉
				</div>
				<div :class="{ 'bg-blue-500 text-white': activeTab === '3', 'bg-gray-200 text-gray-700': activeTab!== '3' }"
					@click="getList('3')"
					class="px-6 py-3 rounded-t cursor-pointer hover:bg-blue-400 transition-colors">
					结业证书
				</div>
			</div>
			<!-- 选项卡内容 -->
			<div class="p-6">
				<!-- 荣誉列表 -->
				<div v-if="activeTab !== '3'">
					<ul>
						<li v-for="(award, index) in awards" :key="index" class="border p-4 mb-4 rounded shadow-sm">
							<p class="font-bold">{{ award.awardName }}</p>
							<p>获奖人: {{ award.studentName }}</p>
							<p>获奖时间: {{ award.awardTime }}</p>
							<p v-if="award.currentSessionNumber">营期编号: {{ award.currentSessionNumber }}</p>
							<p v-if="award.className">班级名称: {{ award.className }}</p>
							<p v-if="award.largeGroupName">大班名称: {{ award.largeGroupName }}</p>
							<p v-if="award.smallGroupName">小班名称: {{ award.smallGroupName }}</p>
						</li>
					</ul>
				</div>
				<!-- 结业证书列表 -->
				<div v-else>
					<ul>
						<li v-for="(cert, index) in certificates" :key="index" class="border p-4 mb-4 rounded shadow-sm bg-blue-50" @click="goDownLoad(cert)">
							<div class="grid grid-cols-2 gap-4 mt-2">
								<div>
									<p><span class="font-semibold">学员姓名:</span> {{ cert.name }}</p>
									<p><span class="font-semibold">班级ID:</span> {{ cert.classId }}</p>
									<p><span class="font-semibold">班级名称:</span> {{ cert.className }}</p>
								</div>
								<div>
									<p><span class="font-semibold">证书编号:</span> {{ cert.id }}</p>
									<p><span class="font-semibold">颁发时间:</span> {{ cert.createTime }}</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: '1',
				awards: [],
				certificates: [] // 存储结业证书数据
			};
		},
		created() {
			this.getList('1')
		},
		methods: {
			goDownLoad(data){
				const urlParams = `?classId=${data.classId}&className=${data.className}&createTime=${data.createTime}&id=${data.id}&name=${data.name}&studentId=${data.studentId}`;
				uni.navigateTo({
				  url: `/pages/downLoad/index${urlParams}`
				});
			},
			getList(type) {
				this.activeTab = type;
				const id = uni.getStorageSync('userInfo').id;
				
				if(type === '1' || type === '2'){
					uni.request({
						url: 'http://localhost:9090/user/getAward',
						method: 'POST',
						data: {
							type,
							id
						},
						success: (res) => {
							this.awards = res.data.data || [];
						},
						fail: (err) => {
							console.error('获取荣誉数据失败:', err);
						}
					});
				} else if (type === '3') {
					uni.request({
						url: 'http://localhost:9090/user/getCertificate',
						method: 'POST',
						data: {
							id
						},
						success: (res) => {
							this.certificates = res.data.data || [];
							console.log('获取证书数据成功:', this.certificates);
						},
						fail: (err) => {
							console.error('获取证书数据失败:', err);
						}
					});
				}
			}
		}
	}
</script>
<style scoped>
	.bg-gray-100 {
		background-color: #f7fafc;
	}

	.text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.font-bold {
		font-weight: 700;
	}

	.mb-4 {
		margin-bottom: 1rem;
	}

	.border {
		border-width: 1px;
		border-color: #e2e8f0;
	}

	.p-4 {
		padding: 1rem;
	}

	.rounded {
		border-radius: 0.25rem;
	}

	.shadow-sm {
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.space-x-4>*+* {
		margin-left: 1rem;
	}

	.border-b {
		border-bottom-width: 1px;
	}

	.border-gray-200 {
		border-color: #edf2f7;
	}

	.px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.py-3 {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.rounded-t {
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	.hover:bg-blue-400:hover {
		background-color: #4299e1;
	}

	.transition-colors {
		transition-property: background-color, border-color, color, fill, stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}

	.bg-blue-500 {
		background-color: #4299e1;
	}

	.text-white {
		color: #fff;
	}

	.bg-gray-200 {
		background-color: #edf2f7;
	}

	.text-gray-700 {
		color: #4a5568;
	}

	.p-6 {
		padding: 1.5rem;
	}
</style>